import React, { Component } from 'react';
import { StyleSheet, Dimensions } from "react-native";
import DatePicker from 'react-native-datepicker';
import moment from 'moment';
import { offerStyle } from './offerStyle';

const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class TimerCpt extends Component {
	constructor(props) {
		super(props);
		let { data } = props || {};
		this.state = {
			datetime: this._modify(data) || null
		};
	}

	//
	_modify = (data) => {
		let { effectiveHour, effectiveMinute } = data;
		if (effectiveHour && effectiveMinute) {
			return `${effectiveHour} 时 ${effectiveMinute} 分`;
		}
		return null
	}

	//改时间
	_changeTime = (datetime, datetime2) => {
		let { event } = this.props;
		let { timeCallback } = event || {};
		let newtTime = moment(datetime2).format('HH:mm');
		if (newtTime.indexOf(':') != -1) newtTime = newtTime.split(':');
		this.setState({
			datetime: `${newtTime[0]} 时 ${newtTime[1]}分`
		}, () => {
			timeCallback && timeCallback({ effectiveHour: newtTime[0], effectiveMinute: newtTime[1] })
		});
	}


	render () {
		let { datetime } = this.state;

		return (
			<DatePicker
				customStyles={{ dateInput: { borderWidth: 0 } }}
				style={[styles.timeInput]}
				date={datetime}
				mode="time"
				format="hh 时 mm 分"
				confirmBtnText="确定"
				cancelBtnText="取消"
				showIcon={false}
				onDateChange={(datetime, datetime2) => { this._changeTime(datetime, datetime2) }}
			/>
		)
	}
}

const styles = StyleSheet.create({
	timeInput: { 
		width: '100%', 
		alignItems: 'flex-start', 
		position:'absolute',
		left:0,
		top:-10*scale
	 }
})